<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title>hello-react</title>
		<style>
			.danger {
				color: red;
			}

			.large {
				font-size: 30px;
			}
		</style>
	</head>

	<body>
		<div id="root">

		</div>

		<script type="text/babel">
			var msg = 'hello-react';
    var arr = [1,2,3,4]
    var style = {color: 'red',fontSize: '20px'}
    class HelloWorld extends React.Component {
      render(h) {
        // jsx模板语法
        return (
          // <div>{msg}</div>
          // <div>{new Date().getTime()}</div>  // 必须要使用值，不能直接渲染对象或函数

          // <ul>
          //   {
          //     Array(10).fill(null).map((item, index) => {  // react中我们统一使用map遍历
          //       return <li key={index}>{index}</li>
          //     })
          //   }
          // </ul>

          // 1 > 2 ? (<div>今天晴天</div>) :  (<div>今天下雨</div>)

          // <div style={style}>{ arr }</div>   // 可以直接渲染数组，不太实用

          <div className={'danger large'}>{/*没有用cli装的，只能这么写注释，属性必须使用驼峰式命名*/}{ arr }</div>
        )
      }
    }

    ReactDOM.render(<HelloWorld />, document.getElementById('root'));
  </script>
	</body>

</html>
